<!-- 作品管理-选择赛事-作品列表 -->
<!-- 弹窗作品类型 -->
<template>
    <div class="container">
        <!-- 内容顶部栏 -->
        <div class="content-top">
            <span class="back">
                <el-button type="primary" @click="back" icon="Back" round>返回</el-button>
            </span>
            <el-input class="search-input" v-model="searchVal" :placeholder="toggleSearch ? '请输入ID' : '请输入作品标题'"></el-input>
            <!-- <el-tooltip :content="toggleSearch ? '切换为名称' : '切换为ID'" placement="bottom">
                <el-switch
                v-model="toggleSearch"
                style="--el-switch-on-color: #13ce66; --el-switch-off-color: rgb(19, 122, 206)"
                />
            </el-tooltip> -->
            <el-button v-if="toggleSearch" @click="searchById" icon="Search" round>搜索</el-button>
            <el-button v-else @click="searchByName" icon="Search" round>搜索</el-button>
            <el-button @click="loadWorkList" round>清除搜索</el-button>
            <!-- <el-button @click="createWork" type="primary" round>添加作品</el-button> -->
            <div
                style="font-family: 微软雅黑;line-height:25px;margin-left: 410px;height:30px;font-size: 24px;border: 2px solid rgb(64, 158, 255);border-radius:5px;padding: 0px 20px; color: white;background-color: rgb(64, 158, 255);">
                作品管理</div>
        </div>

        <!-- 内容表格开始，border:表格边框 -->
        <el-table :data="workList" border max-height="calc(100vh - 190px)">
            <el-table-column label="序号" type="index" align="center" width="70" />
            <!-- <el-table-column label="作品编号" prop="workId" align="center" /> -->
            <el-table-column label="作品标题" prop="workName" align="center" />
            <el-table-column label="作品封面" prop="workCouerPath" align="center" width="100">
                <template v-slot="scope">
                    <el-image style="width: 60px;height: 60px" fit="cover" :src="scope.row.workCouerPath" />
                </template>
            </el-table-column>
            <el-table-column label="用户名称" prop="nickName" align="center" />
            <el-table-column label="作品类型" prop="workType" align="center">
                <template v-slot="scope">
                    {{ getWorkTypeLabel(scope.row.workType) }}
                </template>
            </el-table-column>
            <el-table-column label="作品描述" prop="workDescription" align="center" />
            <el-table-column label="作品路径" prop="workPath" align="center" />
            <!-- <el-table-column label="点赞数" prop="likeNum" align="center" /> -->
            <el-table-column label="审核状态" prop="workStatus" align="center">
                <template v-slot="scope">
                    {{ getWorkStatusLabel(scope.row.workStatus) }}
                </template>
            </el-table-column>
            <el-table-column label="创建时间" prop="createTime" align="center" />
            <el-table-column label="更新时间" prop="updateTime" align="center" />
            <el-table-column label="操作" align="center" width="220">
                <template v-slot="scope">
                    <el-button @click="editDialog(scope.row)" type="text" icon="el-icon-edit"><el-icon>
                            <Edit />
                        </el-icon>审核作品</el-button>
                    <el-button @click="del(scope.row)" type="text" style="color: red"><el-icon>
                            <Delete />
                        </el-icon>删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div style="padding-left: calc(100% - 650px); text-align: right;margin-top: 10px">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="pageSetting.page_num" :page-sizes="[5, 10, 15, 20]" :page-size="pageSetting.page_size"
                layout="total, sizes, prev, pager, next, jumper" :total="pageSetting.total">
            </el-pagination>
        </div>

                <!-- 添加和编辑弹窗 -->
                <div>
            <el-dialog v-model="dialogVisible" :title="editFormData.editFormTitle" :visible="dialogVisible" width="80%"
                :before-close="handleBeforeClose">
                <el-form :model="editFormData" label-position="left" ref="editFormRef">
                    <el-form-item label="作品标题" prop="workName">
                        <!-- <el-input v-model="editFormData.workName" /> -->
                        {{ editFormData.workName }}
                    </el-form-item>
                    <el-form-item label="作品类型" prop="workType">
                        <!-- <el-select v-model="editFormData.workType">
                            <el-option v-for="(option, index) in workTypeOptions" :key="index" :label="option.name"
                                :value="option.id"></el-option>
                        </el-select> -->
                        <span>{{ getWorkTypeLabel(editFormData.workType) }}</span>
                    </el-form-item>
                    <el-form-item label="作品描述" prop="workDescription">
                        <!-- <el-input v-model="editFormData.workDescription" /> -->
                        {{ editFormData.workDescription }}
                    </el-form-item>
                    <el-form-item label="作品路径" prop="workPath">
                        <!-- <el-input v-model="editFormData.workPath" /> -->
                        {{ editFormData.workPath }}
                    </el-form-item>
                    <el-form-item label="作品封面" prop="workCouerPath">
                        <!-- <el-button @click="openImageInput">上传图片</el-button> -->
                        <!-- <input ref="imageInput" type="file" style="display: none" @change="handleImageChange"> -->
                        <img v-show="editFormData.workCouerPath != ''" ref="imagePreview1" :src="editFormData.workCouerPath"
                        style="height: 150px;width: 300px">
                    </el-form-item>
                    <!-- <el-form-item> -->
                        <!--文件上传-->
                        <!-- <el-upload action="#" :http-request="upload" :before-upload="beforeUpload" :show-file-list="false">
                            <el-button type="primary">选择上传文件</el-button>
                        </el-upload>

                        <el-divider content-position="left">上传列表</el-divider> -->
                        <!-- 正在上传的文件列表 -->
                        <!-- <div class="uploading" v-for="uploadFile in uploadFileList" :key="uploadFile">
                            <span class="fileName">{{ uploadFile.name }}</span>
                            <span class="fileSize">{{ formatSize(uploadFile.size) }}</span>

                            <div class="parse">
                                <span>解析进度： </span>
                                <el-progress :text-inside="true" :stroke-width="16"
                                    :percentage="uploadFile.parsePercentage">
                                </el-progress>
                            </div>
                            <div class="progress">
                                <span>上传进度：</span>

                                <el-progress :text-inside="true" :stroke-width="16"
                                    :percentage="uploadFile.uploadPercentage">
                                </el-progress>
                                <span v-if="(uploadFile.uploadPercentage > 0) &
                                    (uploadFile.uploadPercentage < 100)
                                    ">
                                    <span class="uploadSpeed">{{ uploadFile.uploadSpeed }}</span>

                                    <el-button circle link @click="changeUploadingStop(uploadFile)">
                                        <el-icon size="20" v-if="uploadFile.uploadingStop == false">
                                            <VideoPause />
                                        </el-icon>
                                        <el-icon size="20" v-else>
                                            <VideoPlay />
                                        </el-icon>
                                    </el-button>
                                </span>
                            </div>
                        </div>
                    </el-form-item> -->
                </el-form>

                <solt name="footer" style="padding-left: 45%">
                    <template v-if="editFormData.workStatus === 0">
                        <el-button @click="reject(editFormData.contestId)" type="danger">驳回</el-button>
                        <el-button @click="pass(editFormData.contestId)" style="margin-right: 60px"
                            type="success">通过</el-button>
                    </template>
                    <!-- <el-button @click="handleBeforeClose">取 消</el-button>
                    <el-button type="primary" @click="handleConfirm">确 定</el-button> -->
                </solt>
            </el-dialog>
        </div>

        <!-- 添加和编辑弹窗 -->
        <!-- <div>
            <el-dialog v-model="dialogVisible" :title="editFormData.editFormTitle" :visible="dialogVisible" width="80%"
                :before-close="handleBeforeClose">
                <el-form :model="editFormData" label-position="left" ref="editFormRef">
                    <el-form-item label="作品标题" prop="workName">
                        <el-input v-model="editFormData.workName" />
                    </el-form-item>
                    <el-form-item label="作品类型" prop="workType">
                        <el-select v-model="editFormData.workType">
                            <el-option v-for="(option, index) in workTypeOptions" :key="index" :label="option.name"
                                :value="option.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="作品描述" prop="workDescription">
                        <el-input v-model="editFormData.workDescription" />
                    </el-form-item>
                    <el-form-item label="作品路径" prop="workPath">
                        <el-input v-model="editFormData.workPath" />
                    </el-form-item>
                    <el-form-item label="作品封面" prop="workCouerPath">
                        <el-button @click="openImageInput">上传图片</el-button>
                        <input ref="imageInput" type="file" style="display: none" @change="handleImageChange">
                    </el-form-item>
                    <el-form-item>
                        文件上传
                        <el-upload action="#" :http-request="upload" :before-upload="beforeUpload" :show-file-list="false">
                            <el-button type="primary">选择上传文件</el-button>
                        </el-upload>

                        <el-divider content-position="left">上传列表</el-divider>
                        正在上传的文件列表
                        <div class="uploading" v-for="uploadFile in uploadFileList" :key="uploadFile">
                            <span class="fileName">{{ uploadFile.name }}</span>
                            <span class="fileSize">{{ formatSize(uploadFile.size) }}</span>

                            <div class="parse">
                                <span>解析进度： </span>
                                <el-progress :text-inside="true" :stroke-width="16"
                                    :percentage="uploadFile.parsePercentage">
                                </el-progress>
                            </div>
                            <div class="progress">
                                <span>上传进度：</span>

                                <el-progress :text-inside="true" :stroke-width="16"
                                    :percentage="uploadFile.uploadPercentage">
                                </el-progress>
                                <span v-if="(uploadFile.uploadPercentage > 0) &
                                    (uploadFile.uploadPercentage < 100)
                                    ">
                                    <span class="uploadSpeed">{{ uploadFile.uploadSpeed }}</span>

                                    <el-button circle link @click="changeUploadingStop(uploadFile)">
                                        <el-icon size="20" v-if="uploadFile.uploadingStop == false">
                                            <VideoPause />
                                        </el-icon>
                                        <el-icon size="20" v-else>
                                            <VideoPlay />
                                        </el-icon>
                                    </el-button>
                                </span>
                            </div>
                        </div>
                    </el-form-item>
                </el-form>

                <solt name="footer" style="padding-left: 45%">
                    <template v-if="editFormData.workStatus === 0">
                        <el-button @click="reject(editFormData.contestId)" type="danger">驳回</el-button>
                        <el-button @click="pass(editFormData.contestId)" style="margin-right: 60px"
                            type="success">通过</el-button>
                    </template>
                    <el-button @click="handleBeforeClose">取 消</el-button>
                    <el-button type="primary" @click="handleConfirm">确 定</el-button>
                </solt>
            </el-dialog>
        </div> -->

    </div>
</template>
<script setup>
import {
    GetWorkList,
    GetWorkListById,
    DeleteWorkList,
    // AddWorkList,
    // UpdateWorkList, 
    PassWork, RejectWork, GetWorkListByName
} from "@/api/back/work";
import { ref, onMounted } from 'vue'
// import { ref, onMounted, getCurrentInstance } from 'vue'
import { useRouter } from 'vue-router';
import { ElMessage, messageConfig } from "element-plus";
// import {UploadFile} from "@/api/back/contest";

const toggleSearch = ref(false);

const router = useRouter();
const contestId = ref(router.currentRoute.value.query.contestId);

const back = () => {
    router.push({
        name: 'workChooseContest'
    });
};

// 分页
const pageSetting = ref({
    id: contestId.value,
    page_num: 1,
    page_size: 10,
    total: 0
});
// 分页
function handleSizeChange(size) {
    console.log(size, 'size');
    pageSetting.value.page_size = size;
    console.log(pageSetting.value.page_size);
    workList.value = [];
    loadWorkList();
}
// 分页
function handleCurrentChange(page) {
    console.log(page, 'page');
    pageSetting.value.page_num = page;
    console.log(pageSetting.value.page_num);
    workList.value = [];
    loadWorkList()
}

// 存放数据列表
const workList = ref([]);
// 获取数据列表
async function loadWorkList() {
    try {
        const response = await GetWorkList(pageSetting.value);
        if (response.data) {
            workList.value = [];
            workList.value.push(...response.data.pageList);
            pageSetting.value.page_num = response.data.pageNum;
            pageSetting.value.page_size = response.data.pageSize;
            pageSetting.value.total = response.data.total;
            console.log("获取数据列表成功", workList.value);
        }
    } catch (error) {
        console.error("获取数据列表失败", error);
    }
}

// 存放搜索的值
const searchVal = ref("");
// 搜索功能
async function searchById() {
    try {
        if (searchVal.value == null || searchVal.value == "") {
            GetWorkList(pageSetting.value);
        } else {
            const v = {
                search: searchVal.value,
                page: pageSetting.value
            };
            workList.value = [];
            const response = await GetWorkListById(v);
            workList.value.push(...response.data);
            console.log("搜索成功", response);
        }
    } catch (error) {
        console.log("搜索错误", error);
    }
}

const searchByName = async () => {
    if (searchVal.value == null || searchVal.value == "") {
        ElMessage({
            message: "请输入搜索内容",
            type: "warning"
        });
        return;
    }
    workList.value = [];
    const response = await GetWorkListByName({ search: searchVal.value });
    if (response.data.length == 0) {
        ElMessage({
            message: "未找到相关赛事",
            type: "error",
        });
    } else {
        workList.value.push(...response.data);
    }
    console.log("搜索成功", response);
}

// 删除功能
async function del(row) {
    const id = row.workId;
    try {
        await DeleteWorkList(id);
        this.workList = [];
        await loadWorkList();
        ElMessage({
            message: "删除成功",
            type: "success",
            ...messageConfig,
        });
        console.log("删除成功");
    } catch (error) {
        console.log("删除失败", error);
    }
}

// 控制弹窗是否显示
const dialogVisible = ref(false);
const edit = ref(false);
const add = ref(false);


// 控制添加弹窗
// const createWork = () => {
//     editFormData.value.editFormTitle = "新增作品"
//     add.value = true;
//     dialogVisible.value = true;
// };

// 编辑数据变量
const editFormData = ref({
    contestId: contestId.value,
    workId: "",
    workName: "",
    workType: "",
    workDescription: "",
    likeNum: "",
    workPath: "",
    workCouerPath: "",
    editFormTitle: "",
});

// 编辑弹窗数据
const editDialog = (rowData) => {
    editFormData.value = {
        contestId: rowData.contestId,
        publisherId: rowData.publisherId,
        workId: rowData.workId,
        workName: rowData.workName,
        workType: rowData.workType,
        workDescription: rowData.workDescription,
        likeNum: rowData.likeNum,
        workPath: rowData.workPath,
        workCouerPath: rowData.workCouerPath,
        workStatus: rowData.workStatus,
        editFormTitle: "审核作品"
    }
    edit.value = true;
    dialogVisible.value = true;
};

// 处理弹窗确认按钮
// async function handleConfirm() {
//     try {
//         if (edit.value) {
//             await UpdateWorkList(editFormData.value);
//             edit.value = false;
//             console.log("编辑成功", editFormData.value);
//         } else if (add.value) {
//             editFormData.value.workStatus = 0;
//             console.log("添加成功", editFormData.value);
//             await AddWorkList(editFormData.value);
//             add.value = false;
//         }
//     } catch (error) {
//         console.log("失败", error);
//     }
//     dialogVisible.value = false;
//     workList.value = [];
//     await loadWorkList();
// }

// 处理弹窗取消按钮
function handleBeforeClose() {
    editFormData.value = {
        contestId: "",
        workId: "",
        workName: "",
        workType: "",
        workDescription: "",
        likeNum: "",
        workPath: "",
        workCouerPath: "",
        workStatus: "",
    };
    edit.value = false;
    add.value = false;
    dialogVisible.value = false;
    console.log("取消")
}

async function pass() {
    try {
        await PassWork(editFormData.value.workId);
        editFormData.value = [];
        workList.value = [];
        loadWorkList();
        dialogVisible.value = false;
        ElMessage({
        message: '审核通过',
        type: 'success',
        })
    } catch (error) {
        console.log("失败", error);
    }
}

async function reject() {
    try {
        await RejectWork(editFormData.value.workId);
        editFormData.value = [];
        workList.value = [];
        loadWorkList();
        dialogVisible.value = false;
        ElMessage({
        message: '驳回',
        type: 'warning',
        })
    } catch (error) {
        console.log("失败", error);
    }
}

const getWorkStatusLabel = (workStatus) => {
    switch (workStatus) {
        case 0:
            return "未审核";
        case 1:
            return "已通过";
        case 2:
            return "未通过";
        default:
            return "未知";
    }
}

const getWorkTypeLabel = (workType) => {
    switch (workType) {
        case 0:
            return "工科";
        case 1:
            return "理科";
        case 2:
            return "文科";
        case 3:
            return "商科";
        case 4:
            return "综合";
    }
}

//文件上传
// const { proxy } = getCurrentInstance()
// function openImageInput() {
//     proxy.$refs.imageInput.click();
// }

// function openFileInput() {
//   proxy.$refs.fileInput.click();
// }
// async function handleFileChange(event) {
//   const file = event.target.files[0];
//   if (file) {
//     try {
//       await uploadFile(file);
//     } catch (error) {
//       console.error(error);
//     }
//   }
// }

// async function uploadFile(file) {
//   const formData = new FormData();
//   formData.append('file', file);
//   try {
//     const response = await UploadFile(formData);
//     const filePath = response.data;
//     editFormData.value.workPath = filePath;
//     // 处理响应（例如，显示成功消息或更新表单数据）
//     console.log('文件上传成功', response);
//   } catch (error) {
//     console.error('上传文件时出错', error);
//   }
// }

// const workTypeOptions = [
//     {
//         id: 0,
//         name: '工科'
//     },
//     {
//         id: 1,
//         name: '理科'
//     },
//     {
//         id: 2,
//         name: '文科'
//     },
//     {
//         id: 3,
//         name: '商科'
//     },
//     {
//         id: 4,
//         name: '综合'
//     },
// ];

// 上传
// import emitter from "../../utils/eventBus.js";
// import SparkMD5 from "spark-md5";
// import { VideoPause, VideoPlay } from "@element-plus/icons-vue";
// const { appContext } = getCurrentInstance();
// const request = appContext.config.globalProperties.request;
// var uploadFileList = ref([]);


//换算文件的大小单位
// function formatSize(size) {
//     //size的单位大小k

//     var unit;
//     var units = [" B", " K", " M", " G"];
//     var pointLength = 2;
//     while ((unit = units.shift()) && size > 1024) {
//         size = size / 1024;
//     }
//     return (
//         (unit === "B"
//             ? size
//             : size.toFixed(pointLength === undefined ? 2 : pointLength)) + unit
//     );
// }
//计算文件的md5值
// function computeMd5(file, uploadFile) {
//     // eslint-disable-next-line no-unused-vars
//     return new Promise((resolve, reject) => {
//         //分片读取并计算md5

//         const chunkTotal = 100; //分片数
//         const chunkSize = Math.ceil(file.size / chunkTotal);
//         const fileReader = new FileReader();
//         const md5 = new SparkMD5();
//         let index = 0;
//         const loadFile = (uploadFile) => {
//             uploadFile.parsePercentage.value = parseInt((index / file.size) * 100);
//             const slice = file.slice(index, index + chunkSize);

//             fileReader.readAsBinaryString(slice);
//         };
//         loadFile(uploadFile);
//         fileReader.onload = (e) => {
//             md5.appendBinary(e.target.result);
//             if (index < file.size) {
//                 index += chunkSize;
//                 loadFile(uploadFile);
//             } else {
//                 // md5.end() 就是文件md5码
//                 resolve(md5.end());
//             }
//         };
//     });
// }
//检查文件是否存在
// function checkFile(md5) {
//     return request({
//         url: "/public/check",
//         method: "get",
//         params: {
//             md5: md5,
//         },
//     });
// }
//文件上传之前,el-upload自动触发
// async function beforeUpload(file) {
//     console.log("2.上传文件之前");


//     var uploadFile = {};
//     uploadFile.name = file.name;
//     uploadFile.size = file.size;
//     uploadFile.parsePercentage = ref(0);
//     uploadFile.uploadPercentage = ref(0);
//     uploadFile.uploadSpeed = "0 M/s";
//     uploadFile.chunkList = null;
//     uploadFile.file = file;
//     uploadFile.uploadingStop = false;
//     uploadFileList.value.push(uploadFile);

//     var md5 = await computeMd5(file, uploadFile);//async 和 await配可以实现等待异步函数计算完成
//     uploadFile.md5 = md5;

//     var res = await checkFile(md5);  //上传服务器检查，以确认是否秒传
//     var data = res.data.data;

//     if (!data.isUploaded) {
//         uploadFile.chunkList = data.chunkList;
//         uploadFile.needUpload = true;
//     } else {
//         uploadFile.needUpload = false;
//         uploadFile.uploadPercentage.value = 100;

//         console.log("文件已秒传");
//         ElMessage({
//             showClose: true,
//             message: "文件已秒传",
//             type: "warning",
//         });
//     }
// }
//点击暂停或开始上传
// function changeUploadingStop(uploadFile) {

//     uploadFile.uploadingStop = !uploadFile.uploadingStop;
//     if (!uploadFile.uploadingStop) {
//         uploadChunk(uploadFile.file, 1, uploadFile);
//     }
// }
// //上传文件,替换el-upload的action
// function upload(xhrData) {
//     var uploadFile = null;


//     for (var i = 0; i < uploadFileList.value.length; i++) {

//         if (
//             (xhrData.file.name == uploadFileList.value[i].name) &
//             (xhrData.file.size == uploadFileList.value[i].size)
//         ) {
//             uploadFile = uploadFileList.value[i];

//             break;
//         }
//     }


//     if (uploadFile.needUpload) {
//         console.log("3.上传文件");

//         // 分片上传文件
//         // 确定分片的大小
//         uploadChunk(xhrData.file, 1, uploadFile);
//     }
// }
// //上传文件分片
// function uploadChunk(file, index, uploadFile) {
//     var chunkSize = 1024 * 1024 * 10; //10mb
//     var chunkTotal = Math.ceil(file.size / chunkSize);
//     if (index <= chunkTotal) {
//         // 根据是否暂停，确定是否继续上传

//         // console.log("4.上传分片");

//         var startTime = new Date().valueOf();


//         var exit = uploadFile.chunkList.includes(index);
//         // console.log("是否存在",exit);


//         if (!exit) {
//             //    console.log("3.3上传文件",uploadingStop);
//             if (!uploadFile.uploadingStop) {
//                 // 分片上传，同时计算进度条和上传速度
//                 // 已经上传的不在上传、
//                 // 上传完成后提示，上传成功
//                 // console.log("上传分片1",index);
//                 var form = new FormData();
//                 var start = (index - 1) * chunkSize;
//                 let end =
//                     index * chunkSize >= file.size ? file.size : index * chunkSize;
//                 let chunk = file.slice(start, end);
//                 //  downloadBlob(chunk,file)
//                 //  console.log("chunk",chunk);

//                 form.append("chunk", chunk);
//                 form.append("index", index);
//                 form.append("chunkTotal", chunkTotal);
//                 form.append("chunkSize", chunkSize);
//                 form.append("md5", uploadFile.md5);
//                 form.append("fileSize", file.size);
//                 form.append("fileName", file.name);
//                 // console.log("上传分片", index);

//                 request({
//                     url: "/public/upload/chunk",
//                     method: "post",
//                     data: form,
//                     // eslint-disable-next-line no-unused-vars
//                 }).then((res) => {
//                     if (res.data.data) {
//                         let workpath = res.data;
//                         let afters = workpath.data.split('requestPath=')
//                         editFormData.value.workPath = "api.saike.qqwj.live/public/video/" + afters.pop();
//                     }
//                     var endTime = new Date().valueOf();
//                     var timeDif = (endTime - startTime) / 1000;
//                     // console.log("上传文件大小",formatSize(chunkSize));
//                     // console.log("耗时",timeDif);
//                     // console.log("then",index);

//                     // uploadSpeed = (chunkSize/(1024*1024))  / timeDif +" M / s"

//                     uploadFile.uploadSpeed = (10 / timeDif).toFixed(1) + " M/s";
//                     // console.log(res.data.data);
//                     //  console.log("f2",uploadFile);
//                     uploadFile.chunkList.push(index);
//                     //  console.log("f3",uploadFile);

//                     uploadFile.uploadPercentage = parseInt(
//                         (uploadFile.chunkList.length / chunkTotal) * 100
//                     );
//                     // console.log("上传进度",uploadFile.uploadPercentage);

//                     if (index == chunkTotal) {
//                         emitter.emit("reloadFileList");
//                     }

//                     uploadChunk(file, index + 1, uploadFile);
//                 });
//             }
//         } else {
//             console.log(1)
//             uploadFile.uploadPercentage = parseInt(
//                 (uploadFile.chunkList.length / chunkTotal) * 100
//             );

//             uploadChunk(file, index + 1, uploadFile);
//         }
//     }
// }

onMounted(() => {
    loadWorkList();
})
</script>